<template>
  <div class="show-person">
    <span v-if="!thisPersonInfo">--</span>
    <div class="single-person" v-else-if="thisPersonInfo.constructor !== Array">
      <div class="avator">
        <el-popover
          placement="left"
          width="240"
          trigger="hover"
          popper-class="show-person-popover"
        >
          <div class="person-detail">
            <div class="big-avator">
              <img
                :src="`/local/uploadFiles/${thisPersonInfo.picture}`"
                v-if="thisPersonInfo.picture"
                alt=""
                height="170"
              />
              <div
                v-else
                :class="[
                  'auto-big-avator',
                  thisPersonInfo.sex === 0 ? 'girl' : 'boy',
                ]"
              >
                {{ thisPersonInfo?.employee_name?.slice(-2) }}
              </div>
              <div class="name-sex">
                <span>{{ thisPersonInfo.employee_name }}</span>
                <svg class="icon" aria-hidden="true">
                  <use
                    v-bind:xlink:href="`#icon-${
                      thisPersonInfo.sex === 0 ? 'nv1' : 'nan1'
                    }`"
                  ></use>
                </svg>
              </div>
            </div>
            <div class="details">
              <div
                class="department"
                @click="detailsClick($event, thisPersonInfo)"
              >
                <span>部门: </span>
                <div
                  v-html="
                    thisPersonInfo.all_department
                      ? thisPersonInfo.all_department
                          .map((item) => item?.dept_name)
                          .join(breakString)
                      : '--'
                  "
                ></div>
                <i
                  class="el-icon-arrow-right"
                  v-if="
                    thisPersonInfo.all_department &&
                    thisPersonInfo.all_department.length > 1
                  "
                ></i>
              </div>
              <div class="work-id">
                <span
                  >{{
                    personSetOptions.filter(
                      (item) => item.value === showInfo
                    )[0]?.label
                  }}:
                </span>
                <span>{{ thisPersonInfo[showInfo] ?? "--" }}</span>
              </div>
            </div>
          </div>
          <div class="all-department">
            <div class="all-top" @click="allTopClick">
              <i class="el-icon-arrow-left"></i>
              <span>部门</span>
            </div>
            <div
              class="all-info scroll-content"
              v-if="
                thisPersonInfo.all_department &&
                thisPersonInfo.all_department.length > 1
              "
            >
              <div v-for="item in thisPersonInfo.all_department" :key="item.id">
                {{ item.dept_name }}
              </div>
            </div>
          </div>
          <img
            v-if="thisPersonInfo.picture"
            :src="`/local/uploadFiles/${thisPersonInfo.picture}`"
            alt=""
            slot="reference"
            height="25"
            width="25"
            class="my-avator"
          />
          <div
            v-else
            :class="['auto-avator', thisPersonInfo.sex === 0 ? 'girl' : 'boy']"
            slot="reference"
          >
            <span class="name">{{
              thisPersonInfo?.employee_name?.slice(-2)
            }}</span>
          </div>
        </el-popover>
      </div>
      <div class="name-content">{{ thisPersonInfo.employee_name }}</div>
    </div>
    <div class="multiple-persons" v-else>
      <show-person :personInfo="thisPersonInfo[0]" />
      <el-popover
        placement="top"
        width="200"
        trigger="hover"
        popper-class="show-person-multiple-popover"
      >
        <el-row
          v-for="index in Math.ceil((thisPersonInfo.length - 1) / 2)"
          :key="`row${index}`"
        >
          <el-col
            :span="12"
            v-for="item in thisPersonInfo.slice(index * 2 - 1, index * 2 + 1)"
            :key="item.employee_name + Math.random()"
          >
            <show-person :personInfo="item" />
          </el-col>
        </el-row>
        <div class="left-number" slot="reference">
          +{{ thisPersonInfo.length - 1 }}
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script>
import { getAllSettingsMap } from "@/http/api";
export default {
  name: "ShowPerson",
  props: ["personInfo"],
  data() {
    return {
      breakString: "<br />",
      showInfo: "",
      personSetOptions: [
        {
          label: "邮箱",
          value: "email",
        },
        {
          label: "账号",
          value: "employee_id",
        },
        {
          label: "手机号",
          value: "phone_number",
        },
        {
          label: "工号",
          value: "work_id",
        },
      ],
      thisPersonInfo: JSON.parse(JSON.stringify(this.personInfo || "") || ""),
    };
  },
  async mounted() {
    let res = {}
    if(localStorage.getItem("settings")) {
      res = JSON.parse(localStorage.getItem("settings"))
    } else {
      res = await getAllSettingsMap();
      localStorage.setItem("settings", JSON.stringify(res))
    }
    if (res.code === 20041) {
      this.showInfo = res.data.show_person_setting;
      if (res.data.main_dept_hide) {
        this.thisPersonInfo &&
          this.thisPersonInfo.all_department &&
          this.thisPersonInfo.all_department.forEach((element) => {
            if (element.dept_id !== this.thisPersonInfo.main_dept_id) {
              element.dept_name += "(兼)";
            }
          });
      } else {
        this.thisPersonInfo &&
          this.thisPersonInfo.all_department &&
          this.thisPersonInfo.all_department.forEach((element) => {
            if (element.dept_id === this.thisPersonInfo.main_dept_id) {
              element.dept_name += "(主)";
            }
          });
      }
    }
  },
  methods: {
    detailsClick(e, thisPersonInfo) {
      if (
        thisPersonInfo.all_department &&
        thisPersonInfo.all_department.length > 1
      ) {
        let dom = e.target.parentNode.parentNode.parentNode.nextSibling;
        if (dom) dom.classList.add("active");
      }
    },
    allTopClick(e) {
      e.target.parentNode.parentNode.classList.remove("active");
    },
  },
  watch: {
    personInfo: {
      handler(newVal) {
        if (newVal.constructor !== Array || newVal.length > 1) {
          this.thisPersonInfo = newVal;
        } else {
          this.thisPersonInfo = newVal[0];
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.show-person {
  .single-person {
    display: flex;
    align-items: center;
    position: relative;
    & > div {
      z-index: 1;
    }
    .avator {
      & > span {
        display: flex;
      }
      .my-avator {
        border-radius: 50%;
        margin-right: 4px;
      }
    }
  }
  .multiple-persons {
    display: flex;
    .single-person {
      &::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #eff0f1;
        border-radius: 4px;
        box-sizing: content-box;
      }
      & > div {
        transform: scale(0.85);
      }
    }
    .left-number {
      padding: 4px;
      background-color: #eff0f1;
      border-radius: 4px;
      margin-left: 4px;
      line-height: 17px;
      cursor: pointer;
    }
  }
}
</style>
<style lang="less">
.show-person-popover {
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  &::before {
    content: "";
    width: 100%;
    height: 170px;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.0001),
      rgba(0, 0, 0, 0.6) 99.42%
    );
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
  }
  .person-detail {
    .big-avator {
      .auto-big-avator {
        height: 170px;
        font-size: 40px;
        line-height: 170px;
        text-align: center;
        background-color: #4d90f9;
        color: #fff;
        &.girl {
          background-color: #fb95d2;
        }
      }
      .name-sex {
        display: flex;
        align-items: center;
        position: absolute;
        top: 130px;
        left: 20px;
        color: #fff;
        svg {
          width: 16px;
          height: 16px;
          margin-left: 4px;
        }
      }
    }
    .details {
      padding: 10px 16px 10px 10px;
      cursor: pointer;
      & > div span:first-child {
        color: #8f959e;
        margin-right: 6px;
      }
      .department {
        display: flex;
        position: relative;
        div {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          white-space: pre-line;
          -webkit-line-clamp: 3;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        & > span:first-child {
          flex: 0;
          white-space: nowrap;
        }
        i {
          position: absolute;
          flex: 0;
          right: -12px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
  .all-department {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 100%;
    top: 0;
    transition: all 0.5s;
    background-color: #fff;
    &.active {
      left: 0;
    }
    .all-top {
      padding: 10px;
      display: flex;
      align-items: center;
      i {
        margin-right: 4px;
      }
    }
    .all-info {
      padding: 10px;
      height: calc(100% - 50px);
      & > div {
        padding: 10px 0;
        border-bottom: 1px solid #e8eaed;
        color: #1f2329;
      }
    }
  }
}
.show-person-multiple-popover {
  .single-person {
    margin-right: 6px;
    margin-bottom: 4px;
    &::before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      background-color: #eff0f1;
      border-radius: 4px;
      box-sizing: content-box;
    }
    & > div {
      transform: scale(0.85);
    }
  }
}
</style>
